class DevicesList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pageCount : 0,
            pageData : []
        };
        this.devTypeMap = {
            "1" : '门口机',
            "2" : '管理机',
            "3" : '围墙机',
            "4" : '室内机',
            "6" : '语音网关设备'
        }
    }

    updateApp(devicesNum) {
        postJson('/dev/updateApp.x', {devicesNum : devicesNum},  (data) => {
            layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通知成功', {icon: 6});
        })
    }

    delete(devicesNum){
        layui.layer.confirm("确定要删除离线设备么?", (index) =>{
            postJson('/dev/deleteDevice.x', {deviceNum : devicesNum},  () => {
                layui.layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除成功', {icon: 6});
                this.refs.table.refresh();
            });
            layui.layer.close(index);
        });

    }

    switchDevFace(open,devNumber){
        let str = open == 0?'关闭':'开启';
        layui.layer.confirm("确定要"+str+"该设备人脸功能么？",()=>{
            postJson("/dev/switchFacePerm.x",{state : open,devNumber : devNumber},()=>{
                layui.layer.msg(str+"成功!");
                this.refs.table.refresh();
            })
        })

    }

    updateDevicesList(page,pageSize) {
        let params = {
            page : page,
            pageSize : pageSize,
            commCode : this.refs.commSelect.commCode,
            buildingCode : this.refs.commSelect.buildingCode,
            unitCode : this.refs.commSelect.unitCode,
            floorCode : this.refs.commSelect.floorCode,
            roomCode : this.refs.commSelect.roomCode,
            type : this.refs.devType.value,
            state : this.refs.devState.value
        };

        postJson('/EquCtrl/queryEquList.x', params, (data) => {
            this.setState({
                pageCount : data.data.size,
                pageData : data.data.list
            })
        })
    }

    getButton(dev){
        let ret = [];
        if(dev.status !== '1'){
            ret.push (
                <Button size="sm"
                        onClick={() => this.updateApp(dev.deviceNum)}>通知升级
                </Button>
            )
        }else{
            ret.push (
                <Button size="sm" btnType="danger"
                        onClick={() => this.delete(dev.deviceNum)}>删除信息
                </Button>
            )
        }

        /* 只有围墙机和门口机需要开启人脸功能 */
        if(dev.type !== 1 && dev.type !== 3) {
            return ret;
        }

        if(dev.facePerm){
            ret.push(
                <SecurityCheck perms="dev:switchFace">
                    <Button size="sm" btnType="warm" onClick={()=> this.switchDevFace(0,dev.deviceNum)}>关闭人脸</Button>
                </SecurityCheck>
            )
        }else{
            ret.push(
                <SecurityCheck perms="dev:switchFace">
                    <Button size="sm" btnType="normal" onClick={()=> this.switchDevFace(1,dev.deviceNum)}>开启人脸</Button>
                </SecurityCheck>
            )
        }

        return ret;

    }

    getDevTypeOptions(){
        let ret = [];
        for(let key in this.devTypeMap){
            ret.push(<option value={key}>{this.devTypeMap[key]}</option>)
        }
        return ret;
    }

    render() {
        return (
        <Frame header="小区设备在线列表">
            <Form type="pane">
                <Item>
                    <Label>设备类型</Label>
                    <Select ref="devType" onChange={()=>{this.refs.table.refresh()}}>
                        <option value="">全部</option>
                        {
                            this.getDevTypeOptions()
                        }
                    </Select>
                    <Label>状态</Label>
                    <Select ref="devState" onChange={()=>{this.refs.table.refresh()}}>
                        <option value="">全部</option>
                        <option value="0">在线</option>
                        <option value="1">离线</option>
                    </Select>
                </Item>
                <Item>
                    <LayuiCommSelect ref="commSelect" formLabelName="房号选择"
                                     onChangeComm={()=>{this.refs.table.refresh()}}
                                     onChangeBuilding={()=>{this.refs.table.refresh()}}
                                     onChangeUnit={()=>{this.refs.table.refresh()}}
                                     onChangeFloor={()=>{this.refs.table.refresh()}}
                                     onChangeRoom={()=>{this.refs.table.refresh()}}
                />
                </Item>

                <Table ref="table" count={this.state.pageCount} size="sm"
                       pageData={this.state.pageData}
                       pageOnClick={(page,pageSize)=>this.updateDevicesList(page,pageSize)}>
                    <thead>
                    <tr>
                        <th>小区名</th>
                        <th>设备编号</th>
                        <th>设备类型</th>
                        <th>楼宇信息</th>
                        <th>版本号</th>
                        <th>上线离线时间</th>
                        <th width={100}>状态</th>
                        <th width={100}>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.pageData.length > 0?this.state.pageData.map((dev)=>{
                                console.log(dev);
                                return (
                                    <tr>
                                        <td>{dev.commName}</td>
                                        <td>{dev.deviceNum}</td>
                                        <td>{dev.deviceName}</td>
                                        <td>{dev.buildingInfo?dev.buildingInfo:'无'}</td>
                                        <td>{dev.versionNumber}</td>
                                        <td>{dev.time}</td>
                                        <td>{dev.status === "0"?'在线':'离线'}</td>
                                        <td>
                                            {
                                                this.getButton(dev)
                                            }

                                        </td>
                                    </tr>
                                )
                            }):''
                        }
                    </tbody>
                </Table>
            </Form>
        </Frame>
        )
    }
}

ReactDOM.render(
    <DevicesList />,
    document.getElementById('devList')
);